{% extends 'base.html' %}

{% block content %}
<pre
class="line-numbers"
data-src="plugins/download-button/prism-download-button.js"
data-download-link
data-download-link-label="Download the code!"
data-line="1-2,5,7-10"><code class="language-python  match-braces rainbow-braces" data-start="-5">
# http://www.google.com
import string

print(123)
for i in range(1,10,-1):
for j in '1234':
    print(f"i={i}, j={j}")
class Func(object):
def __init__(self):
    self.a = i
    self.b = j
@staticmethod
def func(1,2):
    print(1,2)
</pre></code>
<pre><code class="language-treeview" style="background-color:rgb(216, 224, 247);">
root_folder/
├── a first folder/
|   ├── holidays.mov
|   ├── javascript-file.js
|   └── some_picture.jpg
├── documents/
|   ├── spreadsheet.xls
|   ├── manual.pdf
|   ├── document.docx
|   └── presentation.ppt
└── etc.
    </code></pre>

    <section>
        <h1>Examples</h1>
    
        <h2>Root User Without Output</h2>
        <pre class="command-line" data-user="root" data-host="localhost">
            <code class="language-bash">
cd /usr/local/etc
cp php.ini php.ini.bak
vi php.ini
        </code></pre>
    
        <h2>Non-Root User With Output</h2>
        <pre class="command-line" data-user="chris" data-host="remotehost" data-output="2, 4-8"><code class="language-bash">pwd
/usr/home/chris/bin
ls -la
total 2
drwxr-xr-x   2 chris  chris     11 Jan 10 16:48 .
drwxr--r-x  45 chris  chris     92 Feb 14 11:10 ..
-rwxr-xr-x   1 chris  chris    444 Aug 25  2013 backup
-rwxr-xr-x   1 chris  chris    642 Jan 17 14:42 deploy</code></pre>

        <h2>Windows PowerShell With Output</h2>
        <pre class="command-line" data-prompt="PS C:\Users\Chris>" data-output="2-19">
                <code class="language-powershell">dir
Directory: C:\Users\Chris

Mode                LastWriteTime     Length Name
----                -------------     ------ ----
d-r--        12/12/2015   1:47 PM            Desktop
d-r--         11/4/2015   7:59 PM            Documents
d-r--        10/14/2015   5:06 PM            Downloads
d-r--        10/14/2015   5:06 PM            Videos
        </code></pre>
    </section>


    <pre><code class="language-javascript" data-prismjs-copy="Copy the JavaScript snippet!">Prism.plugins.toolbar.registerButton('hello-world', {
        text: 'Hello World!', // required
        onClick: function (env) { // optional
            alert('This code snippet is written in ' + env.language + '.');
        }
    });</code></pre>

    <pre class="language-css line-numbers" >
        <code>
        .example-gradient {
            background: -webkit-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* Chrome10+, Safari5.1+ */
            background:    -moz-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* FF3.6+ */
            background:     -ms-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* IE10+ */
            background:      -o-linear-gradient(left,     #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* Opera 11.10+ */
            background:         linear-gradient(to right, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* W3C */
        }
        .example-angle {
            transform: rotate(10deg);
        }
        .example-color {
            color: rgba(255, 0, 0, 0.2);
            background: purple;
            border: 1px solid hsl(100, 70%, 40%);
        }
        .example-easing {
            transition-timing-function: linear;
        }
        .example-time {
            transition-duration: 3s;
            transform: rotate(.4turn)；
            transition-timing-function: cubic-bezier(0.9, 0.1, .2, .4);
        }
    </code>
</pre>
{% endblock content %}